<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>高级查询UI</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/mycss.css" />
</head>

<body>
<div class="container-fluid">
	<h3>高级查询UI</h3>
    <div class="search-bar">
        <div class="col-sm-10 form-inline" id="SearchArea">
            <span class="SearchArea">
                <input type='hidden' id='searchType'/>
                <span class="SearchAreaDetail" id="fastSearchArea">
                    <button class="btn btn-primary btn-Search"><span class="glyphicon glyphicon-search"></span>查询</button>
                    <button class="btn btn-primary btn-AdvSearch" id="advSearch" data-module="advSearchArea" data-parents="SearchArea"><span class="glyphicon glyphicon-search"></span>高级查询</button>
                </span>
                <span class="SearchAreaDetail" id="advSearchArea">
                    <input type="text" class=" form-control datepicker " placeholder="采购单开始日期" data-datatype="date" data-fieldnamecn="采购单开始日期" data-compare="2|Less|PurchaseOrderEndDate" data-original-title="" title="">
                    <input type="text" class=" form-control datepicker "  placeholder="采购单结束日期" data-datatype="date" data-fieldnamecn="采购单结束日期" data-compare="2|Genter|PurchaseOrderBeginDate" data-original-title="" title="">
                    <input type="text" class=" form-control datepicker " placeholder="发货开始日期" data-datatype="date" data-fieldnamecn="发货开始日期" data-compare="2|Less|DeliveryBeginDate" data-original-title="" title="">
                    <input type="text" class=" form-control datepicker "  placeholder="发货结束日期" data-datatype="date" data-fieldnamecn="发货结束日期" data-compare="2|Genter|DeliveryEndDate" data-original-title="" title="">
                    <input type="text" class="form-control"  placeholder="采购单号" data-datatype="string" data-len="0|25" data-fieldnamecn="采购单号" data-original-title="" title="">  
                    <input type="text" class="form-control" placeholder="合同编号" data-datatype="string" data-len="0|25" data-fieldnamecn="合同编号" data-original-title="" title="">
                    <input type="text" class="form-control" placeholder="产品名称" data-datatype="string" data-len="0|25" data-fieldnamecn="产品名称" data-original-title="" title="">
                    <input type="text" class="form-control" placeholder="产品型号" data-datatype="string" data-len="0|25" data-fieldnamecn="产品型号" data-original-title="" title="">
                    <select class="form-control"><option value="">选择货物状态</option>
                        <option value="2">订单</option>
                        <option value="4">在途</option>
                        <option value="8">入库</option>
                    </select>
                    <button class="btn btn-primary btn-Search"><span class="glyphicon glyphicon-search"></span>查询</button>
                </span>
            </span>
        </div>
    </div>
    <h3>HTML Code</h3>
    <div>
    	<pre>
            &lt;!--颜色标记部分一一对应--&gt;
            &lt;div class="col-sm-10 form-inline" <font color="blue">id="SearchArea"</font>&gt;
                &lt;span class="SearchArea"&gt;
                    &lt;button class="btn btn-primary btn-AdvSearch" id="advSearch" <font color="red">data-module="advSearchArea"</font> <font color="blue">data-parents="SearchArea"</font>&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;高级查询&lt;/button&gt;
                    &lt;span class="SearchAreaDetail" <font color="red">id="advSearchArea"</font>&gt;
                            &lt;!--高级查询的内容--&gt;
                    &lt;/span&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        </pre>
    </div>
    <h3>Js Code</h3>
    <div>
    	<pre>
        
            &lt;!--引用JS库--&gt;
            &lt;script src="../../Scripts/jquery.FloatModule.js"&gt;&lt;/script&gt;
            &lt;!--对应HTML部分搜索ID--&gt;
            $('#advSearch').floatModule();
        </pre>
    </div>
</div>
<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/jquery.FloatModule.js"></script>
<script>
	$(function(){
		$('#advSearch').floatModule();
	})
</script>
</body>
</html>
